<template>
  <modal :visible="visible" @close="close" @del="del">
    <div class="tile is-parent">
      <article class="tile is-child box">
        <div class="block">
          <div class="control">
            是否确认删除？
          </div>
          <div class="control">
            <button class="button is-primary" @click="del">确定</button>
            <button class="button is-link" @click="close">取消</button>
          </div>
        </div>
      </article>
    </div>
  </modal>
</template>

<script>
  import {Modal} from 'vue-bulma-modal'

  export default {
    components: {
      Modal
    },
    props: {
      visible: Boolean,
      items: Array
    },
    methods: {
      close () {
        this.$emit('close')
      },
      del () {
        this.$emit('del')
        this.close()
      }
    }
  }
</script>
<style scoped>
  .modal {
    z-index: 1086;
  }
  .control {
    text-align: center;
    padding: 0.75rem;
  }
</style>
